<template>
  <div class="file-upload">
    <el-upload
      action
      class="file-upload-upload"
      ref="file_upload"
      :before-upload="beforeUpload"
      :on-success="handleUploadSuccess"
      :http-request="upload"
      :on-remove="handleUploadRemove"
      :before-remove="beforeRemove"
      :on-preview="handleUploadPreview"
      :limit="limit"
      :on-exceed="handleUploadExceed"
      :file-list="fileList"
      :name="name"
    >
      <div><span class="el-upload-label">附件上传：</span><el-link :underline="false" icon="el-icon-plus">添加</el-link></div>
    </el-upload>
  </div>
</template>
<script>
import { ALERT } from '@/utils/responseHandle'
import { COMMON } from '@/utils/commonUtil'
import * as Constant from '@/utils/constant'
import fileapi from '@/api/fileapi'
import api_she from '@/api/api_she'
export default {
  /**
   * 文件上传组件
   */
  name: 'FileUploadMeeting',
  props: {
    limit: { // 最大允许上传个数
      type: Number,
      default: 1000
    },
    fileTypes: { // 允许上传文件类型
      type: Array,
      default: () => {return []}
    },
    name: { // 上传的文件字段名 值 ：uploadDocsFile ,uploadAudioFile
      type: String,
      default: 'file'
    },
    meetingFileList: {
      type: Array,
      default: () => {return []}
    },
    reset: {
      type: Boolean,
      type: false
    },
    meetingInfoId: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      flag: false,
      fileList: [] // 附件列表
    }
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    upload (fileObj) {
      fileObj.param = {needMeetingInfoId: 'N'}
      fileapi.sheUploadFile(fileObj, response => {
        if (response.code === Constant.RT_SUCCESS) {
          fileObj.onProgress({ percent: 100 })
          setTimeout(() => {
            fileObj.onSuccess(response.data, fileObj)
          }, 200)
        } else {
          this.$message.error(response.msg)
          fileObj.onError(response, fileObj)
          // ALERT.errorDefault(response)
        }
      })
    },
    handleUploadExceed () { // 限制上传个数回调
      ALERT.warn(`最多只能上传${this.limit}个附件！`)
      return false
    },
    beforeUpload (file) {
      let filetype = file.name.split('.').pop()
      // let fileTypes = ['pdf', 'txt', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'zip', 'rar', 'jpeg', 'png', 'jpg', 'iso']
      if (this.fileTypes.length === 0) return true
      if (this.fileTypes.indexOf(filetype) === -1) {
        this.$message.warning(`附件上传只能是${this.fileTypes}格式!`)
        return false
      }
      return true
    },
    handleUploadSuccess (res, option) { // res： 后台返回对象，option： 文件对象
      if (this.name === 'uploadDocsFile') {
        let uploadDocsFiles = res[0][this.name]
        if (uploadDocsFiles && uploadDocsFiles.data) {
          let uploadDocsFile = uploadDocsFiles.data[0]
          let file = {meetingFileType: 1, scpCommonFileUploadId: uploadDocsFile.scpCommonFileUploadId, name: uploadDocsFile.fileName, url: uploadDocsFile.url}
          // this.fileList.push(file)
          this.$emit('uploadSuccess', file)
        } else {
          ALERT.error(uploadDocsFiles.msg)
        }
      }
      if (this.name === 'uploadAudioFile') {
        let uploadAudioFiles = res[1][this.name]
        if (uploadAudioFiles && uploadAudioFiles.data) {
          let uploadAudioFile = uploadAudioFiles.data[0]
          let file = {meetingFileType: 2, scpCommonFileUploadId: uploadAudioFile.scpCommonFileUploadId, name: uploadDocsFile.fileName, url: uploadDocsFile.url}
          // this.fileList.push(file)
          this.$emit('uploadSuccess', file)
        } else {
          ALERT.error(uploadDocsFiles.msg)
        }
      }
    },
    beforeRemove (file, fileList) {
    },
    handleUploadRemove (file, fileList) {
      let resList = fileList.map(item => {
        return {
          name: item.name,
          url: item.url,
          scpCommonFileUploadId: item.scpCommonFileUploadId,
          meetingFileType: item.meetingFileType
        }
      })
      this.$emit('uploadRemove', resList)
    },
    handleUploadPreview (file) {
      COMMON.downloadLinkByUrl(file.url, file.name)
    },
    // 清空附件文件列表
    clearFiles () {
      this.$refs['upload'].clearFiles()
      this.fileList = []
    },
    setUploadOssFileListItemNameTitle (fileName) { // 设置文件名 dom title
      setTimeout(() => {
        let fileListItemName = document.querySelectorAll('.cata-upload-oss .el-upload-list__item-name')
        fileListItemName[0].title = fileName
      }, 100)
    }
  },
  watch: {
    reset: {
      immediate: true,
      handler () {
        this.flag = this.reset
      }
    },
    meetingFileList: {
      immediate: true,
      handler () {
        if (this.flag && this.meetingFileList.length > 0) {
          this.flag = false
          this.fileList = JSON.parse(JSON.stringify(this.meetingFileList))
        }
        // this.fileList = this.meetingFileList.map(item => {
        //   return {
        //     name: item.fileName,
        //     url: item.fileWebPath
        //   }
        // })
      }
    }
  }
}
</script>
<style lang="scss">
.file-upload {
  margin-top: 20px;
  &-label {
    color: #606266;
  }
}
</style>
